<template>
    <div class="fastlink" ref="fastlinkref">
        <a href="javascript:void(0);" title="" class="fastlinkTop" @mouseenter="handleMouseEnterR()" @mouseleave="handleMouseLeaveR()">
            <span class="iconBg"><i class="iconfont icon-bianjisekuai"></i></span>
            <span class="font">指标审核</span>
        </a>
        <HideContent :styleD="hideContentStyle" :data="fastLinkData" @changeFlag="changeFlag" v-show="hideFlag" />
       
    </div>
</template>


<script>
import appUtil from '~/assets/utils/appUtil.js';
import HideContent from './hideContent';
import { createNamespacedHelpers } from 'vuex';
const { mapState } = createNamespacedHelpers('homeModule');
export default {
    name: 'CommonLinkFloat',
    props: ['content'],
    data () {
        return {
            hideContentStyle:{
                T:0,
                L:0,
                W:0,
                H:300
            },
            hideFlag:false,
            fastLinkData:[]
        };
    },
    components:{
        HideContent
    },
    computed: {
        ...mapState({
            layout:state => state.layout,
            fasklintFlag:state => state.fasklintFlag
        })
    },
    watch:{
        fasklintFlag(){
            this.initClientRect();
        }
    },
    created(){
        this.getFastlink();
    },
    mounted(){
        let that = this;
        this.$nextTick(() => {
            setTimeout(function(){
                that.initClientRect();
            },1000);
        });
    },
    methods: {
        // 初始化数据
        getFastlink(){
            let data = {
                userCode:appUtil.getSes('userCode'),
                compId:this.content.id
            };
            this.$axios.get('/ptp-uum/fastLink/findFastLink',{params:data})
                .then(res => {
                    this.fastLinkData = res.data.groupList[0].menuList;
                });
        },
        // 初始化位置
        initClientRect(){
            let style = this.$refs.fastlinkref.getBoundingClientRect();
            let T = style.top + style.height;
            let L = style.left;
            let W = style.width;
            this.hideContentStyle = {
                T:parseInt(T),
                L:parseInt(L),
                W:parseInt(W),
                H:this.hideContentStyle.H
            };
        },
        // 鼠标移入
        handleMouseEnterR(){
            this.hideFlag = true;
        },
        // 鼠标移除
        handleMouseLeaveR(){
            this.hideFlag = false;
        },
        // 改变flag状态
        changeFlag(flag){
            this.hideFlag = flag;
        }
    },
};
</script>

<style lang="scss" scoped>
.fastlink{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    .fastlinkTop{
        height: 100%;
        display: flex;
        align-items: center;
        width: 100%;
        .iconBg{
            width: 48px;
            height: 48px;
            background: #0066FF;
            opacity: 0.6;
            border-radius: 50%;
            display: inline-block;
            margin-left: 22px;
            margin-right: 20px;
            text-align: center;
            line-height: 48px;
            .iconfont{
                font-size: 26px;
                color: #fff;
            }        
        }
        .font{
            font-size: 16px;
            color: #666;
        }
    }
    .hideContent{
        position: fixed;
        height: 300px;
    }
}
</style>
